<template>
  <el-dialog
    title="设置发货单生成时间"
    @open="beforeOpen"
    :visible.sync="syncDialogTimes"
    width="500px"
    :before-close="handleClosed"
  >
    <div class="rectisetting__diatc">
      <span>发货单将于每天的下列时间自动生成</span>
      <b class="rectisetting__diatc--reicon">*</b>
      <div
        class="rectisetting__diatc--item"
        v-for="(item, index) in setTimeLists"
        :key="index"
      >
        <el-time-select
          class="rectisetting__diatc--tpick"
          v-model="item.time"
          @change="timesChange(index)"
          :editable="false"
          :clearable="false"
          :picker-options="{
            start: '00:00',
            step: '00:15',
            end: '23:45',
          }"
        >
        </el-time-select>
        <el-button
          v-if="setTimeLists.length - 1 === index && setTimeLists.length !== 4"
          plain
          @click="editSetTimes(-1)"
          class="rectisetting__diatc--edit"
          >+ 添加
        </el-button>
        <el-button
          v-else
          type="danger"
          plain
          @click="editSetTimes(index)"
          class="rectisetting__diatc--edit"
          >- 删除
        </el-button>
      </div>
    </div>
    <div class="rectisetting__diatf">
      <el-button
        @click="
          handleClosed(() => {
            syncDialogTimes = false;
          })
        "
        >取 消</el-button
      >
      <el-button type="primary" @click="editSetTimes(-2)">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch, PropSync } from "vue-property-decorator";
import { savaInvoiceTime } from "@/api/rection/index";

@Component({})
export default class SetTimes extends Vue {
  @PropSync("timeLists", { default: [] })
  syncTimeLists: any;

  setTimeLists = [];

  /** 设置发货单时间弹框 */
  @PropSync("dialogTimes", { type: Boolean, default: false })
  syncDialogTimes: boolean;

  @Prop()
  invoiceId: string;

  /** 监听父组件传入的数据来初始化 */
  @Watch("syncTimeLists", { immediate: true, deep: true })
  onSyncTimeListsChange(newVal, oldVal) {
    if (!oldVal && !newVal.length) {
      this.setTimeLists.push({ time: "21:00" });
    } else {
      const temp = newVal.map(i => {
        return { time: i };
      });
      this.setTimeLists = JSON.parse(JSON.stringify(temp));
    }
  }

  /**
   * 描述 编辑预计提货时间
   * @param {Number} type -1:新增 -2:确定  其余: 删除的序列号
   */
  editSetTimes(type) {
    if (type === -1) {
      this.setTimeLists.push({
        time: "",
      });
    } else if (type === -2) {
      const arr = this.setTimeLists.reduce((a, b) => {
        return b.time ? a.concat(b.time) : a;
      }, []);
      if (!arr.length) {
        this.$message.error("请设置发货单生成时间");
        return false;
      }
      this.savaInvoiceTime(arr)
        .then(() => {
          this.$message.success("保存成功");
          this.syncTimeLists = arr;
          this.syncDialogTimes = false;
        })
        .catch(err => {
          this.$message.error(err.msg || "网络异常，请稍后重试");
        });
    } else {
      this.setTimeLists.splice(type, 1);
    }
  }

  /**
   * 保存发货单生成时间
   */
  savaInvoiceTime(setTime) {
    return new Promise((resolve, reject) => {
      savaInvoiceTime({ id: this.invoiceId, setTime })
        .then(res => {
          if (res.code === 200) {
            resolve(res);
          }
        })
        .catch(err => {
          reject(err);
        });
    });
  }

  /**
   * 描述 限制时间不能选择重复
   * @param {Number} index:当前编辑的序列号
   */
  timesChange(index) {
    const times = this.setTimeLists.reduce((a, b) => {
      return a.concat(b.time);
    }, []);
    const curTime = times[index];
    if (times.indexOf(curTime) !== times.lastIndexOf(curTime)) {
      this.setTimeLists[index].time = "";
      this.$message.error("发货单生成时间不可重复");
    }
  }

  /** 打开谈起回调，更新数据 */
  beforeOpen() {
    if (!this.syncTimeLists.length) {
      this.setTimeLists.push({ time: "21:00" });
    } else {
      const temp = this.syncTimeLists.map(i => {
        return { time: i };
      });
      this.setTimeLists = JSON.parse(JSON.stringify(temp));
    }
  }

  /**
   * 关闭弹窗的回调
   */
  handleClosed(done) {
    done();
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/logistics/rection.scss";
</style>
